<template>
  <div class="table-box">
    <ProTable :columns="columns" ref="proRef" :requestApi="getActivities" :pagination="false" :initParam="initParam">
      <template #tableHeader>
        <el-button type="primary" @click="opera(undefined)">创建优惠活动</el-button>
        <el-button type="danger">批量删除</el-button>
      </template>
      <template #opera="{ row }">
        <el-button link :icon="EditPen" type="primary" @click="opera(row)">编辑</el-button>
        <el-button link :icon="Delete" type="primary">删除</el-button>
      </template>
    </ProTable>
    <activity-drawer ref="acRef"></activity-drawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import activityDrawer from "../components/activityDrawer.vue";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { onBeforeMount, reactive, ref } from "vue";
import { createActivity, editActivity, getActivities } from "@/api/modules/activity";
import { useRoute } from "vue-router";
import { getActivitiesInLouPan } from "@/api/modules/modelActivity";

const route = useRoute();

const proRef = ref<InstanceType<typeof ProTable> | null>();

const acRef = ref<InstanceType<typeof activityDrawer> | null>();

const initParam = reactive({ louPanId: parseInt(route.query.id as string) });

const columns: ColumnProps[] = [
  { prop: "sort", label: "排序值" },
  { prop: "initNum", label: "初始人数" },
  { prop: "title", label: "活动名称" },
  { prop: "application", label: "报名人数" },
  { prop: "opera", label: "操作" }
];

const opera = (row: any) => {
  const params: any = {
    row,
    api: row ? editActivity : createActivity,
    getTable: proRef.value?.getTableList,
    modelList: modelList.value
  };
  acRef.value?.acceptParams(params);
};

const modelList = ref();

const getModelList = async () => {
  const { data } = await getActivitiesInLouPan(parseInt(route.query.id as string));
  modelList.value = data;
};

onBeforeMount(() => {
  Promise.all([getModelList()]);
});
</script>

<style></style>
